<template>
    <view>
      <hx-navbar ref="hxnb" :config="config"></hx-navbar>
      <view class="main">
        <u--form
            labelPosition="top"
            :model="model"
        >
          <u-form-item
              label="编号"
              prop="code"
              borderBottom
              required
          >
            <u--input
                v-model="model.code"
                border="none"
                placeholder="请输入编号"
            ></u--input>
          </u-form-item>
          <u-form-item
              label="名称"
              prop="name"
              borderBottom
              required
          >
            <u--input
                v-model="model.name"
                border="none"
                placeholder="请输入名称"
            ></u--input>
          </u-form-item>
          <u-form-item
              label="类别"
              prop="typeName"
              borderBottom
              required
          >
            <view>
              <text class="input-text">{{ model.typeName || '请选择类别' }}</text>
            </view>
          </u-form-item>
          <u-form-item
              label="季度"
              prop="quarterName"
              borderBottom
              required
          >
            <view>
              <text class="input-text">{{ model.quarterName || '请选择季度' }}</text>
            </view>
          </u-form-item>
          <u-form-item
              label="单位"
              prop="unitName"
              borderBottom
              required
          >
            <view>
              <text class="input-text">{{ model.unitName || '请选择单位' }}</text>
            </view>
          </u-form-item>
          <u-form-item
              label="供货类型"
              prop="supplyTypeName"
              borderBottom
              required
              labelWidth="70"
          >
            <view>
              <text class="input-text">{{ model.supplyTypeName || '请选择供货类型' }}</text>
            </view>
          </u-form-item>
          <u-form-item
              label="工艺"
              prop="technologyName"
              borderBottom
              required
          >
            <view>
              <text class="input-text">{{ model.technologyName || '请选择工艺' }}</text>
            </view>
          </u-form-item>
          <u-form-item
              label="成分"
              prop="components"
              borderBottom
              required
          >
            <u--input
                v-model="model.components"
                border="none"
                placeholder="请输入成分"
            ></u--input>
          </u-form-item>
          <u-form-item
              label="幅宽"
              prop="widthUnitName"
              borderBottom
              required
          >
            <view>
              <text class="input-text">{{ model.widthUnitName || '请选择幅宽' }}</text>
            </view>
          </u-form-item>
          <u-form-item
              label="克重"
              prop="gramWeightUnitName"
              borderBottom
              required
          >
            <view>
              <text class="input-text">{{ model.gramWeightUnitName || '请选择克重' }}</text>
            </view>
          </u-form-item>
          <u-form-item
              label="颜色"
              prop="colorName"
              borderBottom
              required
          >
            <view>
              <text class="input-text">{{ model.colorName || '请选择颜色' }}</text>
            </view>
          </u-form-item>
          <u-form-item
              label="剪样价格"
              borderBottom
              labelWidth="70"
          >
            <view>
              <text class="input-text">{{ '0元/米' }}</text>
            </view>
          </u-form-item>
          <u-form-item
              label="大货价格"
              borderBottom
              labelWidth="70"
          >
            <view>
              <text class="input-text">{{ '0元/米' }}</text>
            </view>
          </u-form-item>
          <u-form-item
              label="底卡"
              borderBottom
          >
            <view>
              <text class="input-text">{{ '0个' }}</text>
            </view>
          </u-form-item>
          <u-form-item
              label="标签"
              borderBottom
          >
            <view>
              <text class="input-text">{{ '请选择标签' }}</text>
            </view>
          </u-form-item>
          <u-form-item
              label="卖点"
              borderBottom
          >
            <view>
              <text class="input-text">{{ '添加产品的特色卖点' }}</text>
            </view>
          </u-form-item>
          <u-form-item
              label="产品主图 0/9"
              borderBottom
              labelWidth="130"
          >
            <u-upload
                name="1"
                multiple
                :maxCount="10"
            ></u-upload>
          </u-form-item>
          <u-form-item
              label="色卡图片 0/9"
              borderBottom
              labelWidth="130"
          >
            <u-upload
                name="1"
                multiple
                :maxCount="10"
            ></u-upload>
          </u-form-item>
          <u-form-item
              label="宝贝详情 共0张"
              borderBottom
              labelWidth="130"
          >
            <u-upload
                name="1"
                multiple
                :maxCount="10"
            ></u-upload>
          </u-form-item>
          <u-button
              type="primary"
              text="保存"
              customStyle="margin-top: 10px"
          ></u-button>
        </u--form>
      </view>
    </view>
</template>

<script>
  export default {
    name: 'customer-product-add',
    data() {
      return {
        config: {
          title: "添加产品",
          color: "#ffffff",
          backgroundColor: [1, ["#409EFF", "#409EFF", "#60b4f6", "#60b4f6"]],
        },
        model: {
          code: '',
          name: '',
          typeId: '',
          typeName: '',
          quarterId: '',
          quarterName: '',
          unitId: '',
          unitName: '',
          supplyTypeId: '',
          supplyTypeName: '',
          technologyId: '',
          technologyName: '',
          components: '',
          widthUnitId: '',
          widthUnitName: '',
          gramWeightUnitId: '',
          gramWeightUnitName: '',
          colorId: '',
          colorName: ''
        }
      }
    }
  }
</script>

<style scoped lang="scss">
  .main {
    padding: 10rpx 30rpx;
    padding-bottom: 40rpx;
    background-color: #fff;

    .input-text {
      color: #b3b3b3;
    }
  }
</style>
